<template>
  <div>
    <p class="time" v-if="time">{{time}}</p>
    <el-popover
      v-for="(item,index) in list" :key='item.id'
      placement="right"
      width="400"
      trigger="click">
      <div>
        <div class="icon_box">
          <span class="iconfont icon-bianjisekuai" @click="editItem(item)"></span>
          <span class="iconfont icon-shanchu" @click="delItem(index)"></span>
        </div>
        <div class="flex_box schedule">
          <span class="label">标题</span>
          <p class="flex1">{{item.title}}</p>
        </div>
        <div class="flex_box schedule">
          <span class="label">日期</span>
          <p class="flex1">{{item.startTime}}~{{item.endTime}}</p>
        </div>
        <div class="flex_box schedule">
          <span class="label">参与者</span>
          <p class="flex1">{{item.user}}</p>
        </div>
        <div class="flex_box schedule">
          <span class="label">备注</span>
          <p class="flex1">{{item.note}}</p>
        </div>
      </div>
      <p class="title" slot="reference">{{item.title}}</p>
    </el-popover>
  </div>
</template>

<script>
export default {
  props:{
    list:{
      type:Array,
      default:()=>{
        return []
      }
    },
    time:{
      type:String,
      default:''
    }
  },
  methods:{
    editItem(item) {
      this.$emit('editItem',item)
    },
    delItem(index) {
      this.$emit('delItem',index)
    },
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/stylus/variable'
  .time
    color #333
    font-weight: bold
    font-size: 14px
    margin-bottom 6px
  .icon_box
    display: flex
    align-items: center
    justify-content: flex-end
    .iconfont
      font-size: 20px
      color #333
      margin-left: 20px
      cursor pointer
  .title
    font-size 12px
    color #222
    border-radius: 3px
    padding 4px 4px 4px 15px
    margin-top 5px
    position relative
    &::before
      display: block
      content ''
      position: absolute
      left: 4px
      top 50%
      transform: translateY(-50%)
      width 5px
      height: 5px
      border-radius: 50%
      background: $theme-color
    &:hover
      background #ccc
  .schedule
    line-height: 30px
  .label
    width: 70px
    color #999
</style>